<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<link href="/mcp/common/HTMLTurbo/0.3.0/module/control/dateInput/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mcp/common/jquery/1.12.4/jquery.min.js"></script>
<script>
function createCalendr(options){
	var calendar=new Calendar(options);
	var element=calendar.getElement();
	document.body.appendChild(element);
	return calendar
}

function createButtonGroup(options){
	var buttonGroup=new ButtonGroup(options);
	var element=buttonGroup.getElement();
	document.body.appendChild(element);
	return buttonGroup
}


//日历
var Calendar=function(options){
	this.dateStr=options.value;
	this.options=options;
	
	if(this.dateStr==""){
		var date=new Date();
		this.dateStr=Utils.getDateStr(date)
	}
	this.date=Utils.getDateByDateStr(this.dateStr);
	this.init();
}
Calendar.WEEK_DICT=["日","一","二","三","四","五","六"]
Calendar.WEEK_DICT_CLASSNAME=["sun","mon","tues","wed","thurs","fri","sat"]


Calendar.MONTH_DICT=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]


Calendar.prototype.init=function(){
	this.year=this.date.getFullYear();
	this.month=this.date.getMonth();
	this.day=this.date.getDate();
	
	this.element=document.createElement("div");
	this.element.className="calendar";
	
	//this.styleElement=$("<link href=\"/common/HTMLTurbo/0.1.0/module/control/dateInput/common.css\" rel=\"stylesheet\" type=\"text/css\" />").get(0);
	
	var self=this;
	
	this.yearController=new YearController(this.year,function(flag){self.switchYear(flag)});
	this.yearElement=this.yearController.getElement();
	
	this.monthController=new MonthController(this.month,function(flag){self.switchMonth(flag);});
	this.monthElement=this.monthController.getElement();
	
	this.dayList=new Calendar.DayList(this.date,function(value){self.options.setDate(value)});
	this.dayListElement=this.dayList.getElement()
	
	this.weekList=new Calendar.WeekList();
	this.weekListElement=this.weekList.getElement()
	
	
	//this.element.appendChild(this.styleElement);
	this.element.appendChild(this.yearElement);
	this.element.appendChild(this.monthElement);
	this.element.appendChild(this.weekListElement);
	this.element.appendChild(this.dayListElement);
	
	this.endYear=this.options.endDate.split("-")[0]
	this.startYear=this.options.startDate.split("-")[0]
}
Calendar.prototype.switchYear=function(flag){
	var endYear=this.endYear
	var startYear=this.startYear
	
	if(flag=="+"){
		if(endYear>this.year){
			this.year++;
		}else{
			return false;
		}
	}else{
		if(startYear<this.year){
			this.year--;
		}else{
			return false;
		}
	}
	this.update();
	return true;
}
Calendar.prototype.switchMonth=function(flag){
	if(flag=="+"){
		this.month++;
	}else{
		this.month--;
	}
	if(this.month==12){
		if(this.switchYear("+")){
			this.month=0;
		}else{
			this.month=11;
		}
	}
	if(this.month<0){
		if(this.switchYear("-")){
			this.month=11;
		}else{
			this.month=0;
		}
	}
	this.update();
}
Calendar.prototype.update=function(){
	this.yearController.setValue(this.year);
	this.monthController.setValue(this.month);
	this.dayList.setYearMonth(this.year,this.month);
}
Calendar.prototype.getElement=function(){
	return this.element;
}






//星期列表
Calendar.WeekList=function(){
	this.init();
}
Calendar.WeekList.prototype.init=function(){
	this.element=document.createElement("ul");
	this.element.className="weekList";
	this.update();
}
Calendar.WeekList.prototype.update=function(){
	var total=7;
	var listItemArray=new Array();
	var listItem=null;
	
	for(var i=0;i<total;i++){
		listItem=new Calendar.WeekListItem(i);
		this.element.appendChild(listItem.getElement())
		listItemArray.push(listItem);
	}
}
Calendar.WeekList.prototype.getElement=function(){
	return this.element;
}
Calendar.WeekListItem=function(num){
	this.num=num;
	this.init();
}
Calendar.WeekListItem.prototype.init=function(){
	this.element=document.createElement("li")
	this.text=document.createElement("a")
	this.element.appendChild(this.text);
	this.update();
}
Calendar.WeekListItem.prototype.update=function(){
	var text=Calendar.WEEK_DICT[this.num];
	this.text.innerHTML=text;
	
	this.element.className=Calendar.WEEK_DICT_CLASSNAME[this.num]
}
Calendar.WeekListItem.prototype.getElement=function(){
	return this.element;
}


//日期列表
Calendar.DayList=function(currentDate,setDate){
	this.currentDate=currentDate;
	
	this.year=this.currentDate.getFullYear();
	this.month=this.currentDate.getMonth();
	
	this.setDate=setDate
	this.init();
}
Calendar.DayList.prototype.init=function(){
	this.element=document.createElement("ul");
	this.element.className="dayList"
	this.update();
}
Calendar.DayList.prototype.setYearMonth=function(year,month){
	this.year=year
	this.month=month;
	this.update();
}
Calendar.DayList.prototype.update=function(){
	var self=this;
	
	var year=this.year;
	var month=this.month
	var day=0;
	
	var length=Utils.getYearMonthDayLength(year,month);
	var listItemArray=new Array();
	var listItem=null;
	
	this.element.innerHTML="";
	var listItemElement=null;
	
	var firstDate=Utils.getDate(year,month,day+1);
	var week=firstDate.getDay();
	var date=null;
	for(var i=0;i<week;i++){
		this.element.appendChild($("<li><a></a></li>").get(0));
	}
	for(var i=0;i<length;i++){
		date=Utils.getDate(this.year,this.month,i+1);
		listItem=new Calendar.DayListItem(i,date,this.currentDate,function(num){self.focusControl(num);});
		listItemArray.push(listItem);
		listItemElement=listItem.getElement()
		
		this.element.appendChild(listItemElement);
	}
}
Calendar.DayList.prototype.focusControl=function(num){
	var date=Utils.getDate(this.year,this.month,num+1);
	this.setDate(date);
}
Calendar.DayList.prototype.getElement=function(){
	return this.element;
}

Calendar.DayListItem=function(num,date,currentDate,focusControl){
	this.num=num;
	this.focusControl=focusControl;
	this.date=date;
	this.currentDate=currentDate;
	
	this.init();
}
Calendar.DayListItem.prototype.init=function(){
	this.element=document.createElement("li")
	this.aElement=document.createElement("a")
	
	//console.log(this.date+"=="+this.currentDate)
	//console.log(this.date==this.currentDate)
	this.element.className=Calendar.WEEK_DICT_CLASSNAME[this.date.getDay()]
	if(this.date.getTime()==this.currentDate.getTime()){
		this.element.className=this.element.className+" current"
	}
	
	this.aElement.innerHTML=this.getText();
	this.element.appendChild(this.aElement);
	
	var self=this;
	$(this.element).bind("click",function(event){return self.clickHandle(event)})
}
Calendar.DayListItem.prototype.getText=function(){
	return this.num+1;
}
Calendar.DayListItem.prototype.getElement=function(){
	return this.element;
}
Calendar.DayListItem.prototype.clickHandle=function(event){
	this.focusControl(this.num);
	return true;
}








var ButtonGroup=function(options){
	var self=this;
	var container=document.createElement("div")
	container.className="buttonGroup"
	
	var todayElement=document.createElement("a");
	todayElement.innerHTML="今天"
	$(todayElement).bind("click",function(event){
		var dateTime=new Date();
		date=new Date(dateTime.getFullYear(),dateTime.getMonth(),dateTime.getDate())
		options.setDate(date);
	});
	
	
	var clearElement=document.createElement("a");
	clearElement.innerHTML="清除"
	$(clearElement).bind("click",function(event){
		options.setValue("");
		options.removeControl();
	});
	
	
	
	var closeElement=document.createElement("a");
	closeElement.innerHTML="关闭"
	$(closeElement).bind("click",function(event){
		options.removeControl();
	});
	
	container.appendChild(todayElement);
	container.appendChild(clearElement);
	container.appendChild(closeElement);
	
	this.element=container;
}
ButtonGroup.prototype.getElement=function(){
	return this.element;
}

var ValueController=function(){
}
ValueController.prototype.init=function(value){
	this.element=document.createElement("div");
	this.textElement=document.createElement("span");
	this.textElement.className="value"
	this.textElement.innerHTML=this.getText();
	
	this.nextButton=document.createElement("a")
	this.nextButton.className="nextButton"
	this.nextButton.innerHTML="&gt;"
	
	this.prevButton=document.createElement("a")
	this.prevButton.className="prevButton"
	this.prevButton.innerHTML="&lt;"

	
	this.element.appendChild(this.prevButton);
	this.element.appendChild(this.textElement);
	this.element.appendChild(this.nextButton);
	
	var self=this;
	
	$(this.prevButton).bind("click",function(event){self.prevButtonClickHandle(event)})
	$(this.nextButton).bind("click",function(event){self.nextButtonClickHandle(event)})
	
	
	this.update();
}
ValueController.prototype.update=function(){
	this.textElement.innerHTML=this.getText();
}
ValueController.prototype.setValue=function(value){
	this.value=value;
	this.update();
}
ValueController.prototype.getText=function(){
	return this.value;
}

ValueController.prototype.getElement=function(){
	return this.element;
}
ValueController.prototype.prevButtonClickHandle=function(event){
	this.switchValue("-");
}
ValueController.prototype.nextButtonClickHandle=function(event){
	this.switchValue("+");
}









var MonthController=function(value,switchValue){
	this.value=value;
	this.switchValue=switchValue;
	this.init();
}
MonthController.prototype=new ValueController();
MonthController.prototype.getText=function(){
	var text=Calendar.MONTH_DICT[this.value]
	return text;
}
MonthController.prototype.getElement=function(){
	this.element=ValueController.prototype.getElement.call(this);
	this.element.className="month"
	return this.element;
}

var YearController=function(value,switchValue){
	this.value=value;
	this.switchValue=switchValue;
	this.init();
}
YearController.prototype=new ValueController();
YearController.prototype.getElement=function(){
	this.element=ValueController.prototype.getElement.call(this);
	this.element.className="year"
	return this.element;
}
YearController.prototype.getText=function(){
	var text=this.value+"年"
	return text;
}


var Utils=function(){}
Utils.getDate=function(year,month,day){
	var date=new Date(year,month,day);
	return date;
}


Utils.getDateByDateStr=function(value){
	this.dateArray=value.split("-");
	
	var year=this.dateArray[0]
	var month=this.dateArray[1]
	var day=this.dateArray[2]
	var date=new Date(year,(month-1),day)
	return date;
}




Utils.getDateStr=function(date){
	var year=date.getFullYear();
	var month=date.getMonth()+1;
	var day=date.getDate();

	if(month.toString().length==1){
		month="0"+month
	}
	var day=date.getDate()
	
	if(day.toString().length==1){
		day="0"+day.toString();
	}
	var dateStr=year+"-"+month+"-"+day;
	return dateStr;
}
Utils.getYearMonthDayLength=function(year,month){
	var leapYear = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? true: false;
	var length;
	switch (parseInt(month)) {
		case 0:
		case 2:
		case 4:
		case 6:
		case 7:
		case 9:
		case 11:
			length = 31;
			break;
		case 3:
		case 5:
		case 8:
		case 10:
			length = 30;
			break;
		case 1:
			length = leapYear ? 29: 28;
	}
	return length;
}
</script>
</head>

<body>
</body>
</html>